import * as React from 'react'
import { RouteComponentProps } from 'react-router-dom';
import Nav from '../../components/nav'
import moment from 'moment';
import style from './style.module.less'
import { addPill } from '../../services/api';

var myreg = /^([a-zA-Z0-9]+[_]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;

interface Params {
  name: string
  email: string
  time: string
  content: string
  tip: string
}
type Props = RouteComponentProps<Params>
function Put(props: Props) {
  const [name, setName] = React.useState('')
  const [email, setEmail] = React.useState('')
  const [time, setTime] = React.useState(moment().format("YYYY-MM-DD HH:mm:ss"))
  const [content, setContent] = React.useState('')
  const [tip, setTip] = React.useState(' ')
  const [nameTip, setNameTip] = React.useState('')
  const [emailTip, setEmailTip] = React.useState('')
  const [contentTip, setContentTip] = React.useState('')


  const check = (name: string, email: string, content: string) => {
    let flag = true;
    if (name.length === 0) {
      flag = false;
      setNameTip('名字 必须填写')
    } else {
      setNameTip('')
    }
    if (email.length === 0) {
      flag = false;
      setEmailTip('邮箱 必须填写')
    } else if (!myreg.test(email)) {
      flag = false;
      setEmailTip('邮箱 格式不对')
    } else {
      setEmailTip('')
    }
    if (content.length === 0) {
      flag = false;
      setContentTip('内容 必须填写')
    } else {
      setContentTip('')
    }
    return flag;
  }

  return (
    <>
      <Nav />
      <div className="container">
        <h1 className="page-header">添加胶囊</h1>
        <div className="main">
          <form method="post">
            <label>你的名字</label>
            <span className={style.err}>
              {nameTip}
            </span>
            <input type="text"
              name="name"
              value={name}
              onChange={(e) => setName(e.target.value)}
            />
            <label>你的邮箱</label>
            <span className={style.err}>
              {emailTip}
            </span>
            <input name="email"
              type="text"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
            />
            <label>打开时间</label>
            <input name="time"
              type="text"
              value={time}
              onChange={(e) => setTime(e.target.value)}
            />
            <span className="tips">打开时间之前，胶囊内容是看不到的。</span>
            <label>胶囊内容</label>
            <span className={style.err}>
              {contentTip}
            </span>
            <textarea name="content"
              rows={8} cols={80}
              value={content}
              onChange={(e) => setContent(e.target.value)}
            ></textarea>
            <span className="tips">胶囊内容不能超过5000字。</span>
            <label>未到期提示信息</label>
            <textarea name="tips"
              rows={3} cols={80}
              value={tip}
              onChange={(e) => setTip(e.target.value)}
            ></textarea>
            <span className="tips">
              在 打开时间 之前打开胶囊，会看到提示信息。
            </span>
            <p>
              <button type="button" id="sub"
                onClick={async () => {
                  if (check(name, email, content)) {
                    let result = await addPill({ name: name, email: email, time: time, content: content, tip: tip })
                    localStorage.setItem("__id__", String(result.id))
                    props.history.push('/put_done')
                  }
                }
                }
              >添加胶囊</button>
            </p>
          </form>
        </div>
      </div>
    </>
  )
}
export default Put
